<template>
  <PageWrapper contentBackground title="项目详情">

    <div class="pt-4 m-4 desc-wrap">

      <a-card title="项目进度">
        <a-steps :current="contract.index" progress-dot size="small">
          <a-step v-for="item in contract.flowInfoList" :title="item.name">
            <template #description>
              <div>{{ item.user }}</div>
              <p>{{ item.time }}</p>
            </template>
          </a-step>
        </a-steps>
      </a-card>

      <a-card title="项目概况" :bordered="false">
        <a-descriptions size="small" :column="4">
          <a-descriptions-item label="合同编号"> {{ contract.formNo }} </a-descriptions-item>
          <a-descriptions-item label="委托单位"> {{ contract.clientName }} </a-descriptions-item>
          <a-descriptions-item label="委托业务"> {{ contract.projectType }} </a-descriptions-item>
          <a-descriptions-item label="联系人及电话"> {{ contract.clientManager }} </a-descriptions-item>
          <a-descriptions-item label="地址"> {{ contract.clientAddress }} </a-descriptions-item>
          <a-descriptions-item label="项目经办人"> {{ contract.projectOperatorName }} </a-descriptions-item>
          <a-descriptions-item label="项目负责人"> {{ contract.projectManagerName }} </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="合同登记" :bordered="false">
        <a-descriptions size="small" :column="4">
          <a-descriptions-item label="表单">
            <router-link :to="`/project/contract/view/` + contract.id">
              {{ contract.clientName }}合同登记
            </router-link>
          </a-descriptions-item>
          <a-descriptions-item label="我方单位"> {{ contract.companyName }} </a-descriptions-item>
          <a-descriptions-item label="合同有效期"> {{ contract.contractBegin }} </a-descriptions-item>
          <a-descriptions-item label="计划完成日期"> {{ contract.finishTime }} </a-descriptions-item>
          <a-descriptions-item label="合同金额"> {{ contract.contractAmountTotal }} </a-descriptions-item>
          <a-descriptions-item label="派工到账比例(%)">
            <span v-for="item in contract.contractRatio"> {{ item.name }} {{ item.value }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="委托依据">
            <router-link v-if="contract.checkReason" :to="`/project/reason/view/` + contract.checkReason">
              {{ contract.clientName }}委托依据
            </router-link>
          </a-descriptions-item>
          <a-descriptions-item label="采样计划">
            <router-link v-if="contract.checkPlan" :to="`/project/plan/view/` + contract.checkPlan">
              {{ contract.clientName }}采样计划
            </router-link>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="合同确认" :bordered="false">
        <a-descriptions size="small" :column="4">
          <a-descriptions-item label="表单">
            <router-link :to="`/financial/confirm/view/` + contract.id">
              {{ contract.clientName }}合同确认
            </router-link>
          </a-descriptions-item>
          <a-descriptions-item label="合同完整性"> {{ contract.isComplete == 1 ? '是' : '否' }} </a-descriptions-item>
          <a-descriptions-item label="盖章合同是否已递交财务室"> {{ contract.isDeliver == 1 ? '是' : '否' }} </a-descriptions-item>
          <a-descriptions-item label="盖章合同">
            <a v-if="contract.confirmFileList" target="_blank" :href="contract.confirmFileList">{{ contract.clientName
              }}盖章合同</a>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="合同收款" :bordered="false">
        <a-descriptions size="small" :column="1">
          <a-descriptions-item label="表单">
            <ol>
              <li v-for="(item) in contract.receiveList" :key="item.id">
                <router-link :to="`/financial/received/view/` + item.id">
                  {{ contract.clientName }}合同收款
                </router-link>
              </li>
            </ol>
          </a-descriptions-item>
          <a-descriptions-item label="合同总金额（元）">{{ contract.contractAmountTotal }}，其中: <span
              v-for="m in contract.contractAmountList">{{
                m.name
              }}({{
                m.value }}), </span></a-descriptions-item>
          <a-descriptions-item label="已收款金额（元）">{{ contract.receivedAmountTotal }}，其中: <span
              v-for="m in contract.receivedAmountList">{{
                m.name
              }}({{
                m.value }}), </span></a-descriptions-item>
          <a-descriptions-item label="未收款金额（元）">{{ contract.contractAmountTotal - contract.receivedAmountTotal
          }}</a-descriptions-item>

        </a-descriptions>
      </a-card>

      <a-card title="申请开票" :bordered="false">
        <a-descriptions size="small" :column="1">
          <a-descriptions-item label="表单">
            <ol>
              <li v-for="(item) in contract.billList" :key="item.id">
                <router-link :to="`/financial/bill/view/` + item.id">
                  {{ contract.clientName }}申请开票
                </router-link>
              </li>
            </ol>
          </a-descriptions-item>
          <a-descriptions-item label="合同总金额（元）">{{ contract.contractAmountTotal }}</a-descriptions-item>
          <a-descriptions-item label="已收款金额（元）">{{ contract.receivedAmountTotal }}</a-descriptions-item>
          <a-descriptions-item label="已开票金额（元）">{{ contract.billAmountTotal }}</a-descriptions-item>
          <a-descriptions-item label="已收款未开票金额（元）">{{ contract.receivedAmountTotal - contract.billAmountTotal
          }}</a-descriptions-item>
          <a-descriptions-item label="合同剩余可开票金额（元）">{{ contract.contractAmountTotal - contract.billAmountTotal
          }}</a-descriptions-item>
        </a-descriptions>
      </a-card>

    </div>


    <CollapseContainer title="项目详情">

      <a-tabs default-active-key="activeKey">
        <a-tab-pane v-for="delivery in contract.deliveryList" :tab="delivery.itemName" :key="delivery.id">

          <a-card title="派工单">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item label="派工单">
                <router-link :to="`/project/delivery/view/` + delivery.id">
                  {{ delivery.itemName }}派工单
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card v-if="delivery.itemName == '职业卫生'" title="场调">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item label="场调">
                <ol>
                  <li v-for="(item) in delivery.collectList" :key="item.id">
                    <router-link :to="`/project/step10/` + item.id">
                      {{ delivery.itemName }}场调
                    </router-link>
                  </li>
                </ol>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card v-if="delivery.itemName == '验收'" title="场调">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item label="场调">
                <ol>
                  <li v-for="(item) in delivery.collectList" :key="item.id">
                    <router-link :to="`/project/step11/` + item.id">
                      {{ delivery.itemName }}场调
                    </router-link>
                  </li>
                </ol>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card v-if="delivery.itemName == '安全托管' || delivery.itemName == '环保管家'" title="现场服务">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item label="现场服务">
                <ol>
                  <li v-for="(item) in delivery.collectList" :key="item.id">
                    <router-link :to="`/project/step14/` + item.id">
                      {{ delivery.itemName }}现场服务
                    </router-link>
                  </li>
                </ol>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="采样">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step1/` + item.id">
                  {{ delivery.itemName }}采样
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="办公室采样">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step15/` + item.id">
                  {{ delivery.itemName }}采样
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="收样">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step2/` + item.id">
                  {{ delivery.itemName }}收样
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="实验派工">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step3/` + item.id">
                  {{ delivery.itemName }}实验派工
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="实验分析">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link v-for="(item2,index2) in item.libAnalysisList"  :to="`/project/step4/` + item2.id">
                   {{ delivery.itemName }}实验分析{{ index2 + 1 }}<span> </span>
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="实验报告">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step5/` + item.id">
                  {{ delivery.itemName }}实验报告
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card v-if="delivery.itemName == '验收' || delivery.itemName == '职业卫生'" title="报告编制">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step12/` + item.id">
                  {{ delivery.itemName }}报告编制
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card v-if="delivery.itemName == '验收' || delivery.itemName == '职业卫生'" title="公示">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step13/` + item.id">
                  {{ delivery.itemName }}公示
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="交付">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step6/` + item.id">
                  {{ delivery.itemName }}交付
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="办公室结算">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step7/` + item.id">
                  {{ delivery.itemName }}办公室结算
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="财务结算">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item v-for="(item,index) in delivery.collectList" :key="item.id" :label="`第`+ (index + 1) +`次服务`">
                <router-link :to="`/project/step8/` + item.id">
                  {{ delivery.itemName }}财务结算
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <a-card title="归档">
            <a-descriptions size="small" :column="4">
              <a-descriptions-item label="归档">
                <router-link v-if="delivery.collectList.length > 0"
                  :to="`/project/step9/` + delivery.collectList[0].id">
                  {{ delivery.itemName }}归档
                </router-link>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

        </a-tab-pane>
      </a-tabs>

    </CollapseContainer>





  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeMount, onMounted, } from 'vue';
import { PageWrapper } from '/@/components/Page';
import { CollapseContainer } from '/@/components/Container';
import { Button, Tag, List, Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
import { projectView, } from '/@/api/business/contract';
import { useRoute, } from 'vue-router'


export default defineComponent({
  components: {
    CollapseContainer, PageWrapper, Button, Tag,
    List, ListItem: List.Item, ListItemMeta: List.Item.Meta, Tabs, TabPane: Tabs.TabPane,
    [Divider.name]: Divider,
    [Card.name]: Card,
    Empty,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
    [Steps.name]: Steps,
    [Steps.Step.name]: Steps.Step,
    [Tabs.name]: Tabs,
    [Tabs.TabPane.name]: Tabs.TabPane,
  },
  emits: ['success', 'register'],
  setup() {

    const contract: any = ref('');
    const activeKey = ref('');

    const id = ref(0);
    onBeforeMount(() => {
      // 获取路由参数
      const r = useRoute();
      let idStr = r.params.id
      if (typeof (idStr) == 'string') {
        id.value = parseInt(idStr, 10)
      } else {
        id.value = parseInt(idStr[0], 10)
      }
    })

    onMounted(() => {
      if (id.value > 0) {
        projectView(id.value).then(res => {
          contract.value = res
          if (res.deliveryList.length > 0) {
            activeKey.value = res.deliveryList[0].id
          }
          console.log('获取后台合同数据成功', res)
        })
      }
    })

    //主表单end
    return { activeKey, contract, };
  },
});
</script>
